<template>
  <div class="classifity">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <p>乐居分类:</p>
      <div class="lejuCard">
        <div v-for="item in lejuCategory" :key="item.id" class="item">
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>
            <img :src="item.icon" alt="">
          </el-card>
        </div>
      </div>
      <p>全部分类:</p>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="name"
          label="菜单名称"
          sortable
          width="180"
        />
        <el-table-column
          prop="name"
          label="icon"
          sortable
          width="180"
        >
          <template v-slot="scope">
            <img :src="scope.row.icon" alt="" style="width:60px;height: 60px;">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="分类名字"
        />
        <el-table-column
          prop="sort"
          label="排序"
        />
        <el-table-column
          prop="showStatus"
          label="显示状态"
        />
        <el-table-column
          prop="navStatus"
          label="导航栏展示"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
      </el-table>
    </el-card>

  </div>
</template>

<script>
import { getAllCategory } from '@/api/commodityManage/cdClassifity/index'
export default {
  name: 'VueAdminTemplateMasterIndex',

  data() {
    return {
      lejuCategory: [],
      categoryInfo: [],
      tableData: []
    }
  },

  created() {
    getAllCategory().then(res => {
      console.log(res)
      this.categoryInfo = res.data.items
      this.lejuCategory = res.data.items.find(ele => {
        return ele.category.name === '乐居'
      }).children
      console.log(this.lejuCategory)

      var arr = res.data.items.map(ele => {
        var obj = {
          ...ele.category,
          children: ele.children
        }
        return obj
      })
      console.log(arr)
      arr.forEach(ele => {
        ele.showStatus = ele.showStatus ? '展示' : '不展示'
        ele.navStatus = ele.navStatus ? '展示' : '不展示'
        ele.children.forEach(e => {
          e.showStatus = e.showStatus ? '展示' : '不展示'
          e.navStatus = e.navStatus ? '展示' : '不展示'
        })
      })

      // arr.showStatus = arr.showStatus ? '展示' : '不展示'
      this.tableData = arr
    })
  },

  mounted() {

  },

  methods: {

  }
}
</script>

<style scoped lang="scss">
.classifity{
  .lejuCard{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
      width: 25%;
      padding: 0 10px;
      img{
        height: 300px;
      }
    }

  }
}
</style>
